<template>
  <el-menu
    :default-active="index"
    class="el-menu"
  >
    <el-menu-item
      v-for="item in renderNav"
      :index="item.id"
      :key="item.id"
      @click="$router.push(item.path)"
    >
      <el-icon><component :is="item.icon"></component></el-icon>
      <span>{{ item.title }}</span>
    </el-menu-item>
  </el-menu>
</template>

<script setup>
import {
  Document,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';

// vuex
// import { useStore } from "vuex";
// const store = useStore();

// pinia
import { useUserStore } from '../storesPinia/user.js';
const userStore = useUserStore()
console.log(userStore)

const navs = [{
  id:"1",
  title:"会议室管理",
  path:"/",
  icon: Document,
  power: [0, 1, 2]
},{
  id:"2",
  title:"人员管理",
  path:"/user",
  icon: Location,
  power: [0]
},{
  id:"3",
  title:"部门管理",
  path:"/team",
  icon: Setting,
  power: [0, 1]
},{
  id:"4",
  title:"其他管理",
  path:"/other",
  icon: Setting,
  power: [0, 1, 2]
}];

// 获取当前用户的权限
// const userMsg = localStorage.getItem("userMsg") ? JSON.parse(localStorage.getItem("userMsg")) : {};
// const power = ref(userMsg.power);

// 获取状态该管理器中的状态
// vuex
// const power = computed(()=>{
//   return store.state.user.power;
// })


// pinia
const power = computed(()=>{
  return userStore.power
})
console.log(power);

// 根据当前用户的权限，过滤要显示的导航信息
const renderNav = navs.filter(val=>{
  return val.power.includes( power.value );
})

// 初次加载根据当前路由决定选中项的高亮
const route = useRoute()
const index = ref("1");
navs.forEach(val=>{
  if(val.path === route.path){
    index.value = val.id;
  }
})
</script>

<style>
.el-menu{
  height:100%;
}
</style>